<template>
  <div class="page_main">
    <div class="header">
      <div class="title">客户确认单</div>
    </div>
    <div class="content">
      <el-form :model="cuForm" v-loading="formLoading">
        <table class="mailTable">
          <tr class="firstTr">
            <td style="width: 30%" class="firstTd column tip_td">
              客户名称
            </td>
            <td style="width: 70%" colspan="3" class="column">
              {{ cuForm.customer_name }}
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              媒体形式、数量、尺寸
            </td>
            <td class="column" style="padding: 10px">
              <el-table :data="cuForm.mediaTypeCountAmount||[]" stripe size="mini" border>
                <el-table-column label="媒体" min-width="30" align="center" prop="name"></el-table-column>
                <el-table-column label="数量" min-width="10" align="center" prop="spec_count"></el-table-column>
                <el-table-column label="尺寸" min-width="20" align="center" prop="size"></el-table-column>
              </el-table>
            </td>
          </tr>
          <tr>
            <td class="firstTd column" colspan="2" style="padding: 0 10px 0 10px">
              <el-card style="margin: 10px auto 10px auto" v-for="(temp,index) in cuForm.billMarketVOList||[]"
                       :key="index" shadow="always"
              >
                <table class="mailTable" style="width: 100%">
                  <tr class="firstTr">
                    <td class="firstTd column tip_td">
                      点位详情
                    </td>
                    <td class="column" colspan="3">
                      <div style="margin-bottom: 20px">
                        <point-config :data="temp.configData"  :read-only="true" :tip-show="false" :is-init="false" :show-num-btn="false"
                                      :media-type-ext-v-o-list="mediaTypeExtVOList"
                                      :media-type-spec-price-v-o-list="mediaTypeSpecPriceVOList"
                        ></point-config>
                      </div>
                    </td>
                  </tr>
<!--                  <tr>-->
<!--                    <td class="firstTd column tip_td" style="width: 10%">-->
<!--                      最晚上刊时间-->
<!--                    </td>-->
<!--                    <td class="column" style="width: 40%">-->
<!--                      {{ temp.latest_up_date }}&nbsp;&nbsp;{{ temp.latest_up_time === 1 ? '上午' : '下午' }}-->
<!--                    </td>-->
<!--                    <td class="column tip_td" style="width: 10%">-->
<!--                      最晚下刊时间-->
<!--                    </td>-->
<!--                    <td class="column" style="width: 40%">-->
<!--                      {{ temp.latest_down_date }}&nbsp;&nbsp;{{ temp.latest_down_time === 1 ? '上午' : '下午' }}-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td class="firstTd column tip_td">-->
<!--                      是否第一次上画-->
<!--                    </td>-->
<!--                    <td class="column">-->
<!--                      {{ temp.first_time ? '是' : '否' }}-->
<!--                    </td>-->
<!--                    <td class="column tip_td">-->
<!--                      是否有新画面-->
<!--                    </td>-->
<!--                    <td class="column">-->
<!--                      {{ temp.has_new_pic ? '是' : '否' }}-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td class="firstTd column tip_td">-->
<!--                      画面是否回收-->
<!--                    </td>-->
<!--                    <td class="column">-->
<!--                      {{ temp.pic_need_recycle ? '是' : '否' }}-->
<!--                    </td>-->
<!--                    <td class="column tip_td">-->
<!--                      是否显示代理资源标识-->
<!--                    </td>-->
<!--                    <td class="column">-->
<!--                      {{ temp.show_proxy_flag ? '是' : '否' }}-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td class="firstTd column tip_td">-->
<!--                      是否需要小样-->
<!--                    </td>-->
<!--                    <td colspan="3" class="column">-->
<!--                      {{ temp.need_sample ? '是' : '否' }}-->
<!--                    </td>-->
<!--                  </tr>-->
                  <tr>
                    <td class="firstTd column tip_td">
                      拍照要求
                    </td>
                    <td class="column" colspan="3">
                      <table style="width: 100%;margin-bottom: 10px">
                        <tr class="firstTr table-herder">
                          <td class="firstTd column" style="width: 20%">媒体类型</td>
                          <td class="column" style="width: 10%">动作类型</td>
                          <td class="column" style="width: 10%">照片数</td>
                          <td class="column" style="width: 5%">近景</td>
                          <td class="column" style="width: 5%">远景</td>
                          <td class="column" style="width: 10%">时间</td>
                          <td class="column" style="width: 30%">具体要求</td>
                        </tr>
                        <template v-if="temp.photoRequirementsDataArr.length>0"
                                  v-for="(item,index) in temp.photoRequirementsDataArr"
                        >
                          <template v-for="(tmp,i) in item.arr">
                            <tr v-for="(temp2,j) in tmp.arr" :key="index+'_'+i+'_'+j">
                              <td v-if="i===0 && j===0" class="firstTd column" :rowspan="getRowSpan(item)">
                                {{ getPointTypeName(item.media_type_id) }}
                              </td>
                              <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                                {{ temp2.shoot_type === 1 ? '上刊' : temp2.shoot_type === 2 ? '下刊' : '中间监播' }}
                              </td>
                              <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                                {{ getAllCount(tmp.arr) }}
                              </td>
                              <td class="column">
                                {{ temp2.close_shoot_num ? temp2.close_shoot_num : 0 }}
                              </td>
                              <td class="column">
                                {{ temp2.far_shoot_num ? temp2.far_shoot_num : 0 }}
                              </td>
                              <td class="column">{{ temp2.shoot_date }}</td>
                              <td class="column" style="font-size: 12px">
                                <div>
                                  {{ temp2.baidu_time ? '有百度时间' : '' }}
                                  {{ temp2.watermark_time ? '有水印时间' : '' }}
                                  {{ temp2.newspaper_time ? '有报纸时间' : '' }}
                                </div>
                                <div>
                                  {{ temp2.normal_shoot ? '正常拍摄' : '' }}
                                  {{ temp2.background_clear ? '背景清晰' : '' }}
                                  {{ temp2.newpaper_clear ? '报纸清晰' : '' }}
                                </div>
                              </td>
                            </tr>
                          </template>
                        </template>
                        <tr v-if="temp.photoRequirementsDataArr.length===0">
                          <td class="firstTd column" colspan="7">暂无数据</td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td class="firstTd column" colspan="4">
                      画面内容
                    </td>
                  </tr>
                  <tr>
                    <td class="firstTd column" colspan="4">
                      <div class="flex flex-wrap justify-center">
                        <el-card v-for="(item,index) in temp.imArr" :key="index" style="margin: 10px" shadow="always">
                          <el-image style="width: 200px; height: auto"
                                    :src="item" :preview-src-list="temp.imArr"
                          ></el-image>
                        </el-card>
                      </div>
                    </td>
                  </tr>
                </table>
              </el-card>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              客户确认签字
            </td>
            <td class="column">
              <el-button v-show="!cuForm.confirm_sign_img && !confirm_sign_img" @click="showSignDialog">签字确认</el-button>
              <el-image v-if="cuForm.confirm_sign_img || confirm_sign_img"
                        :src="cuForm.confirm_sign_img||confirm_sign_img"
              ></el-image>
            </td>
          </tr>
        </table>
        <div style="text-align: center;padding-bottom: 20px">
          <el-button v-if="!cuForm.confirm_sign_img" type="primary" @click="submit">确认提交</el-button>
        </div>
      </el-form>
      <sign-dialog ref="signDialog" @confirm-sign="confirmSign"></sign-dialog>
    </div>
  </div>
</template>

<script>
import FlowBtnRow from '@/components/FlowBtnRow'
import PointConfig from '@/components/PointPlanSetting/pointConfig'
import { confirm_bill_detail, sign_confirm_bill } from '@/api/merketOrder'
import { formatData } from '@/views/business/contract/util'
import { cloneDeep, parseInt } from 'lodash'
import SignDialog from '@/components/SignDialog'
import { upFileBase64Anon } from '@/api/others'

export default {
  name: 'customer_check',
  created() {
    const batchStr = this.$route.query.batchStr
    this.batchStr = batchStr
    this.init()
  },
  components: { SignDialog, FlowBtnRow, PointConfig },
  computed: {
    mediaSettingType() {
      let arr = []
      arr.push(-1)
      if (this.configData.length > 0) {
        arr = arr.concat(this.configData[0].arr)
      }
      return arr
    }
  },
  data() {
    return {
      cuForm: {
        dept_id: null,
        customer_id: null,
        contract_id: null,
        bill_sale_id: null,
        need_sample: null,
        latest_up_date: null,
        latest_up_time: null,
        latest_down_date: null,
        latest_down_time: null,
        first_time: null,
        has_new_pic: null,
        show_proxy_flag: null,
        pic_need_recycle: null,
        design_user_id: null,
        memo: null,
        mediaType2RequireList: {}
      },
      photoRequirementsDataArr: [],
      configData: [],
      mediaTypeExtVOList: [],
      mediaTypeSpecPriceVOList: [],
      imArr: [],
      formLoading: false,
      confirm_sign_img: null,
      batchStr: null
    }
  },
  methods: {
    init() {
      this.formLoading = true
      confirm_bill_detail({ batchStr: this.batchStr }).then(res => {
        this.cuForm = res.data
        this.mediaTypeExtVOList = res.data.mediaTypeExtVOList
        this.mediaTypeSpecPriceVOList = res.data.mediaTypeSpecPriceVOList
        if (this.cuForm.billMarketVOList && this.cuForm.billMarketVOList.length > 0) {
          for (let i = 0; i < this.cuForm.billMarketVOList.length; i++) {
            let tmp = this.cuForm.billMarketVOList[i]
            this.$set(tmp, 'photoRequirementsDataArr', [])
            this.$set(tmp, 'imArr', [])
            const temp = {}
            temp.data = tmp
            this.$set(tmp, 'configData', formatData(temp))
            let photoRequirementsDataArr = []
            for (let key in tmp.mediaType2RequireList) {
              let data = {
                media_type_id: parseInt(key),
                arr: []
              }
              for (let i = 1; i < 4; i++) {
                let filter = tmp.mediaType2RequireList[key].filter(item => item.shoot_type === i)
                if (filter && filter.length) {
                  let tmp = {
                    shoot_type: i,
                    arr: cloneDeep(filter)
                  }
                  data.arr.push(tmp)
                }
              }
              photoRequirementsDataArr.push(data)
            }
            console.log(photoRequirementsDataArr)
            this.$set(tmp, 'photoRequirementsDataArr', photoRequirementsDataArr)
            // 处理图片
            if (tmp.designPicList && tmp.designPicList.length > 0) {
              tmp.imArr = tmp.designPicList.map(item => {
                return item.pic_url
              })
            }
          }
        }
        this.formLoading = false
      })
    },
    getPointTypeName(id) {
      const tmp = this.mediaTypeExtVOList.find(item => item.id == id)
      if (tmp) {
        return tmp.name
      } else {
        return '全部'
      }
    },
    getAllCount(arr) {
      let count = 0
      arr.forEach(item => {
        if (!isNaN(parseInt(item.close_shoot_num))) {
          count += parseInt(item.close_shoot_num)
        }
        if (!isNaN(parseInt(item.far_shoot_num))) {
          count += parseInt(item.far_shoot_num)
        }
      })
      return count
    },
    showSignDialog() {
      this.$refs.signDialog.show()
    },
    // 获取签字信息方法
    confirmSign(data) {
      upFileBase64Anon({ file: data }).then(res => {
        this.confirm_sign_img = res.data
      })
    },
    submit() {
      this.$confirm('确定提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        sign_confirm_bill({ batchStr: this.batchStr, signImgUrl: this.confirm_sign_img }).then(res => {
          loading.close()
          this.$message({
            type: 'success',
            message: '确认成功!'
          })
          this.init()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    //获取跨行数
    getRowSpan(item) {
      let count = 0
      item.arr.forEach(tmp => {
        count += tmp.arr.length
      })
      return count
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}

.header {
  width: 80%;
  margin: 0 auto;
}

.content {
  margin-top: 20px;
}

.mailTable {
  width: 80%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.tip {
  color: red;
  width: 200px;
}

.tip_td {
  padding: 0 20px !important;
  background-color: #F5F7FA;
  font-weight: bold;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
